@charset "UTF-8";
/**
 * sprite.scss 雪碧图效果展示页面
 * @author Kayo
 * @date 2018-03-16
 *
 */
/**
 * var.scss 变量
 * @author Kayo&Clearwu
 * @date 2015-08-17
 *
 * --- common ----
 * #common 通用
 *
 * --- component ----
 * #button 按钮组件
 * #dialog 对话框组件
 * #mask 遮罩层组件
 * #dropdownMenu 下拉菜单组件
 * #tab 选项卡组件
 * #inputText、#textarea 文本输入组件
 *
 * --- project ---
 * #frame 外层框架
 * #others 其它组件
 * #column 栏目，用于展示组件及其介绍
 * #index 首页
 */
/**
 * Tencent is pleased to support the open source community by making QMUI Web available.
 * Copyright (C) 2019 THL A29 Limited, a Tencent company. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except in compliance
 * with the License. You may obtain a copy of the License at
 *
 * http://opensource.org/licenses/MIT
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License is
 * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
 * _qmui.scss QMUI 总样式文件
 * @author Kayo
 * @date 2014-10-31
 *
 */
/**
 * _mixin.scss
 * @author Kayo
 * @date 2014-10-31
 *
 */
/**
 * _tool.scss 常用工具方法
 * @author Kayo
 * @date 2015-08-23
 *
 */
/**
 * _reset.scss
 * @author Kayo
 * @date 2014-10-30
 *
 * #reset
 * #html5
 */
/* #reset */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, legend {
    margin: 0;
}

ul, ol, fieldset {
    margin: 0;
    padding: 0;
}

th, td {
    padding: 0;
}

table {
    font-size: inherit;
}

fieldset, img {
    border: 0;
}

ul, ol, li {
    list-style: none;
}

body {
    font-size: 14px;
    line-height: 1.5;
    background: #FFF;
    color: #474860;
}

h1, h2, h3, h4 {
    font-size: 18px;
    font-weight: normal;
}

body, input, textarea, select, button {
    font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif;
    outline: none;
    -webkit-text-size-adjust: none;
}

input, textarea, select, button {
    font-size: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    color: #00A3E1;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(105, 186, 255, 0.13);
}

:focus {
    outline: none;
}

/* #html5 HTML5 元素的支持 */
article, aside, details,
figcaption, figure,
footer, header, hgroup,
main, nav, section,
summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

/**
 * _function.scss
 * @author Kayo
 * @date 2014-11-17
 */
.qui_txtNormal {
    font-weight: normal !important;
}

.qui_txtBold {
    font-weight: bold !important;
}

.qui_txtLeft {
    text-align: left !important;
}

.qui_txtRight {
    text-align: right !important;
}

.qui_txtUnderline {
    text-decoration: underline !important;
}

.qui_txtUnderlineNone {
    text-decoration: none !important;
}

.qui_txtOverflow {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: normal;
}

.qui_clear:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}

.qui_txtNowrap {
    white-space: nowrap !important;
}

.qui_layoutLeft {
    float: left !important;
}

.qui_layoutRight {
    float: right !important;
}

.qui_displayNone {
    display: none !important;
}

/**
 * _base.scss 存放项目基础样式、项目用方法、项目用function
 * @author Kayo
 * @date 2015-08-18
 *
 * #common
 */
pre {
    margin: 0;
}

html {
    height: 100%;
}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

a:hover {
    text-decoration: underline;
}

.dm_icon{
    display: inline-block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.dm_icon_BannerLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: 0 0;
    width: 160px;
    height: 160px;
}

.dm_icon_BannerMobileLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px -170px;
    width: 80px;
    height: 80px;
}

.dm_icon_BottomLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: 0 -340px;
    width: 72px;
    height: 72px;
}

.dm_icon_CloseMenu{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -430px -170px;
    width: 24px;
    height: 24px;
}

.dm_icon_Component{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -170px 0;
    width: 160px;
    height: 160px;
}

.dm_icon_Extension{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: 0 -170px;
    width: 160px;
    height: 160px;
}

.dm_icon_Menu{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -464px -170px;
    width: 24px;
    height: 24px;
}

.dm_icon_QQMailLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px -260px;
    width: 104px;
    height: 32px;
}

.dm_icon_Sass{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -170px -170px;
    width: 160px;
    height: 160px;
}

.dm_icon_TopLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px -302px;
    width: 96px;
    height: 20px;
}

.dm_icon_TreeMenuThumb{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -430px -204px;
    width: 14px;
    height: 14px;
}

.dm_icon_WeReadLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -82px -340px;
    width: 104px;
    height: 32px;
}

.dm_icon_WeWorkLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -196px -340px;
    width: 104px;
    height: 32px;
}

.dm_icon_Workflow{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px 0;
    width: 160px;
    height: 160px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi){
    .dm_icon_BannerLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: 0 0;
        background-size: 500px 412px;
    }
    .dm_icon_BannerMobileLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_BottomLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: 0 -340px;
        background-size: 500px 412px;
    }
    .dm_icon_CloseMenu{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -430px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Component{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -170px 0;
        background-size: 500px 412px;
    }
    .dm_icon_Extension{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: 0 -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Menu{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -464px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_QQMailLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px -260px;
        background-size: 500px 412px;
    }
    .dm_icon_Sass{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -170px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_TopLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px -302px;
        background-size: 500px 412px;
    }
    .dm_icon_TreeMenuThumb{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -430px -204px;
        background-size: 500px 412px;
    }
    .dm_icon_WeReadLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -82px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_WeWorkLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -196px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_Workflow{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px 0;
        background-size: 500px 412px;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-resolution: 3dppx){
    .dm_icon_BannerLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: 0 0;
        background-size: 500px 412px;
    }
    .dm_icon_BannerMobileLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_BottomLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: 0 -340px;
        background-size: 500px 412px;
    }
    .dm_icon_CloseMenu{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -430px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Component{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -170px 0;
        background-size: 500px 412px;
    }
    .dm_icon_Extension{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: 0 -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Menu{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -464px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_QQMailLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px -260px;
        background-size: 500px 412px;
    }
    .dm_icon_Sass{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -170px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_TopLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px -302px;
        background-size: 500px 412px;
    }
    .dm_icon_TreeMenuThumb{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -430px -204px;
        background-size: 500px 412px;
    }
    .dm_icon_WeReadLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -82px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_WeWorkLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -196px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_Workflow{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px 0;
        background-size: 500px 412px;
    }
}
.dm_svgIcon { 
    background: url("../images/svgIcon.svg") left top no-repeat;
    display: inline-block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    vertical-align: top; 
}
.dm_svgIcon_Component { 
    width: 160px;
    height: 160px;
    background-position: 0 0; 
}
.dm_svgIcon_Extension { 
    width: 160px;
    height: 160px;
    background-position: -170px 0; 
}
.dm_svgIcon_Sass { 
    width: 160px;
    height: 160px;
    background-position: 0 -170px; 
}
.dm_svgIcon_Workflow { 
    width: 160px;
    height: 160px;
    background-position: -170px -170px; 
}
.sprite_wrap {
    padding-top: 50px;
    width: 786px;
    margin: 0 auto;
    text-align: center;
}

.sprite_wrap_title {
    margin-bottom: 50px;
    color: #333;
    font-size: 45px;
}

.sprite_section {
    position: relative;
    margin-bottom: 58px;
}
.sprite_section:before {
    content: ".";
    position: absolute;
    bottom: 0;
    left: 283px;
    right: 283px;
    font-size: 0;
    border-top: 1px solid #D4D6D8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .sprite_section:before {
        -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
                transform: scaleY(0.5);
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 3dppx), (min-resolution: 288dpi) {
    .sprite_section:before {
        -webkit-transform: scaleY(0.3333333333);
            -ms-transform: scaleY(0.3333333333);
                transform: scaleY(0.3333333333);
    }
}
.sprite_section:last-child {
    margin-bottom: 0;
}
.sprite_section:last-child:before {
    content: normal;
}
.sprite_section .dm_icon,
.sprite_section .dm_svgIcon {
    margin-left: 20px;
}
.sprite_section .dm_icon:first-child,
.sprite_section .dm_svgIcon:first-child {
    margin-left: 0;
}

.sprite_section_title {
    margin-bottom: 22px;
    font-size: 34px;
}

.sprite_section_cnt {
    padding: 20px;
    background-color: #f8f9fa;
}